<template>
	<div>
		<el-tabs v-model="activeTab" @tab-click="handleTabClick" type="border-card" style="height:calc(100vh - 280px)">
			<el-tab-pane label="发货计划" name="storage">
				<el-table :data="storageRecords" style="width: 100%">
					<el-table-column prop="date" label="日期" width="180"></el-table-column>
					<el-table-column prop="material" label="材料" width="180"></el-table-column>
					<el-table-column prop="quantity" label="数量"></el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="质检记录" name="dispatch">
					<el-table class="pageTableClass" :data="dispatchRecords" border height="calc(100vh - 320px)" 	header-cell-class-name="witheTableHeader">
						<el-table-column label="序号" align="center" width="70" type="index" />
						<el-table-column prop="no" label="单号" align="center" min-width="200" />
						<el-table-column prop="sourceNo" label="来源单号" align="center" min-width="200" />
						<el-table-column prop="qualityType" label="质检类型" align="center" min-width="200">
							<template #default="scope">
								<span> {{ getQualityTypeByValue(scope.row.qualityType) }} </span></template>
						</el-table-column>
						<el-table-column prop="passRate" label="合格率" align="center" min-width="100">
							<template #default="scope">
								<div v-if="scope.row.passRate"> {{ scope.row.passRate }} %</div>
							</template>
						</el-table-column>
						<el-table-column prop="totalQuantity" label="质检数量" align="center" min-width="110" />
						<el-table-column prop="schemeTaskForm.qualifiedQuantity" label="合格数" align="center" min-width="100" />
						<el-table-column prop="schemeTaskForm.unQualifiedQuantity" label="不合格数" align="center"
														 min-width="100" />
						<el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
					</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElTabs, ElTabPane } from 'element-plus';

// 响应式变量，用于控制当前激活的标签页
const activeTab = ref('storage');

// 各个标签页的数据
const storageRecords = ref([
	// 入库记录数据
]);

const dispatchRecords = ref([
	// 出库记录数据
]);

const inventoryDetails = ref([
	// 库存明细数据
]);

const qualityRecords = ref([
	// 质检记录数据
]);

onMounted(() => {
	getList();
});

const getList = () => {
};
// 处理标签页点击事件
const handleTabClick = (tab) => {
	// 这里可以执行一些逻辑，比如更新数据等
	console.log('当前激活的标签页:', tab.props.name);
};
</script>

<style scoped>
/* 组件的样式 */
</style>
